<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .star {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <span>
            <img class="star" src="./xx.png" alt="" @mouseover="showRating(0);changeStarColor(0, true)"
                @mouseout="changeStarColor(0, false)" @click="selectRating(0)">
            <img class="star" src="./xx.png" alt="" @mouseover="showRating(1);changeStarColor(1, true)"
                @mouseout="changeStarColor(1, false)" @click="selectRating(1)">
            <img class="star" src="./xx.png" alt="" @mouseover="showRating(2);changeStarColor(2, true)"
                @mouseout="changeStarColor(2, false)" @click="selectRating(2)">
            <img class="star" src="./xx.png" alt="" @mouseover="showRating(3);changeStarColor(3, true)"
                @mouseout="changeStarColor(3, false)" @click="selectRating(3)">
            <img class="star" src="./xx.png" alt="" @mouseover="showRating(4);changeStarColor(4, true)"
                @mouseout="changeStarColor(4, false)" @click="selectRating(4)">
        </span>
        <p>{{ratingText}}</p>
    </div>

</body>
<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            const arr = ref(['差评', '较差', '中等', '一般', '好评']);
            const selectedRating = ref(-1);
            const ratingText = ref('');

            function showRating(index) {
                ratingText.value = arr.value[index];
            }

            function selectRating(index) {
                selectedRating.value = index;
                const stars = document.querySelectorAll('.star');
                for (let i = 0; i < stars.length; i++) {
                    if (i <= index) {
                        stars[i].src = './x2.png';
                    } else {
                        stars[i].src = './xx.png';
                    }
                }
            }

            function changeStarColor(index, isHover) {
                const stars = document.querySelectorAll('.star');
                for (let i = 0; i < stars.length; i++) {
                    if (isHover && i <= index || selectedRating.value !== -1 && i <= selectedRating.value) {
                        stars[i].src = './x2.png';
                    } else {
                        stars[i].src = './xx.png';
                    }
                }
            }

            return {
                ratingText,
                showRating,
                selectRating,
                changeStarColor
            };
        }

    }).mount('#app');
</script>

</html>